<template>
  <s-layout id="layout" navbar="normal" :title="'报名记录'" :autoBack="true" :leftIconColor="`${headstate.color}`"
    :bgColor="headstate.bgColor" :tabbarshow='false'
    :titleStyle="{ color: `${headstate.color}`, fontSize: '32rpx', fontWeight: '600', zIndex: '99999' }"
    :onShareAppMessage="shareInfo">

    <view id="app"
      :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/beijing1200webp.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <fui-sticky range :top="`${safeAreaInsets?.top + 44}`">
        <view class="area fui-title">
          <!-- 项目栏 -->
          <view class="project" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/weitu01.png)` }">
            <view class="chop" @tap="SelectItem">
              <view class="spill">{{ PopupText }}</view>
              <image :src="`${baseUrl}/uploads/uniapp_image/staff/xuanze.png`" mode="scaleToFill" />
            </view>
            <view class="text">
              <view class="date">
                <view @click="dateRange">{{ single }}</view>
                <image :src="`${baseUrl}/uploads/uniapp_image/staff/jiao_01.png`" mode="scaleToFill" />
              </view>
              <view class="all">
                <button class="click" @tap="exportlist">导出数据</button>
              </view>
            </view>
          </view>

        </view>
        <!-- 列表综合 -->
        <template v-slot:content>
          <view class="add_area area" v-if="list.length">
            <view class="scroll_box">
              <view v-for="(i, index) in list" :key="i.id">
                <fui-sticky :top="`${safeAreaInsets?.top + 136}` ">
                  <view class="list_item_title">
                    <view class="left">
                      <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_zhizhao.png`"
                        mode="scaleToFill" v-if="i.source == 1" />
                      <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_dailiren.png`"
                        mode="scaleToFill" v-else />
                      <view class="titlename">{{ i.title }}</view>

                    </view>

                  </view>
                </fui-sticky>

                <view class="list_item" v-for="(item, index) in i.list" :key="index">

                  <!-- 头像 -->
                  <view class="head_box">
                    <image :src="`${baseUrl}` + item.user.avatar" mode="aspectFill" />
                  </view>
                  <!-- 信息盒子 -->
                  <view class="message_box">
                    <view class="message_title">{{ item.user.nickname }}
                      <text class="sex">{{ item.user.gender == 0 ? '女' : '男' }}</text>
                      <text class="blue"> {{ item.user.age }}</text>
                    </view>
                    <view class="mes_flex">
                      {{ item.user.identity_id }}
                    </view>
                    <view class="message_identity" @tap="dialPhone(item)" >
                      <view class="phone_image">
                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon03.png`"
                          mode="scaleToFill" />
                        
                      </view>
                      {{ item.user.mobile }}
                    </view>
                    <view class="mes_flex">
                      {{ item.title }}
                    </view>
                  </view>
                  <!-- 金额 -->

                  <view class="add_right">
                    <button class="detele" @tap="detele(item)">移除</button>
                  </view>
                </view>
              </view>

              <!-- 正在加载组件 -->
              <view>
                <s-loadmore-gather :current_page="listPage" :last_page="listlast_page"
                  ref="loadmoreRef"></s-loadmore-gather>
              </view>
            </view>

          </view>
          <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"
            marginTop="50%"></u-empty>
        </template>
      </fui-sticky>
    </view>

    <!-- 默认日历 -->
    <fui-bottom-popup :show="date_show" @close="date_close">
      <!-- :minDate="time.minDate" -->
      <fui-calendar :isMultiple="true" :value="time.intraday" :maxDays="-1" :showBtn="true" type="3" :maxDate="time.maxDate" @change="date_confirm"></fui-calendar>
    </fui-bottom-popup>

    <!-- 底部弹出组件 && 部门弹出 -->
    <s-project-class @selectedData="switchTitle" :arrayList="projectDataList" ref="popupListRef"
      :searchBoxIsShow="false" :showGoLink="'#'"></s-project-class>
<!-- 移除人员 -->
<up-modal :show="detele_show" :showCancelButton="true" @confirm="detele_onClick" @cancel="deteleonCancel" :content="'确定移除此人吗？'"></up-modal>
</s-layout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { onLoad, onShow, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
import sheep from '@/sheep';
import tools from '@/sheep/helper/tools.js';
import { calculateAge } from '@/utils/fn.js';
const { safeAreaInsets } = uni.getSystemInfoSync();
const time = reactive({
  minDate: '',
  maxDate: '',
  monthNum: '13',
  start_date: '',
  end_date: '',
  intraday: []
})
const single = ref()
// 设置默认日期，最大值为今天，最小值为去年今天
let dates = new Date();
let year = dates.getFullYear();
let month = dates.getMonth() + 1;
let day = dates.getDate();
if (month <= 9) {
  month = '0' + month;
}
if (day <= 9) {
  day = '0' + day;
}
time.minDate = year + '-' + '01' + '-' + '01';
time.maxDate = (year + 1) + '-01-01';
time.start_date = year + '-' + month + '-' + '01';
time.end_date = year + '-' + month + '-' + day;
time.intraday = [time.start_date, time.end_date]



// 项目周期弹出
const date_show = ref(false)

// 选择完成
const date_confirm = (e) => {
  single.value = `${e.value[0]} - ${e.value[e.value.length - 1]}`
  time.start_date = `${e.value[0]}`
  time.end_date = `${e.value[e.value.length - 1]}`

  list.value = [];
  listpagenumber.value = 1
  getlistForPrincipal();
  date_show.value = false
}
// 关闭
const date_close = () => {
  date_show.value = false
}
// 打开
const dateRange = () => {
  date_show.value = true
}
// 吸顶
const scrollTop = ref(0);
const headstate = ref({
  bgColor: 'rgba(0,0,0,0)',
  color: '#fff',
  width: ''

})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop;
  //  //当距离大于20的时候吸顶
  if (scrollTop.value > 0) {
    headstate.value.bgColor = '#fff'
    headstate.value.color = '#333'
    headstate.value.width = '100%'
  } else {
    headstate.value.bgColor = 'rgba(0,0,0,0)'
    headstate.value.color = '#fff'
    headstate.value.width = 'calc(100% - 40rpx);'
  }
});


onLoad((options) => {
  
  single.value = `${time.start_date} - ${time.end_date}`
});
onShow(() => {
  let param = {
    is_all: '1',
    is_include_main: '0',
  }
  projectList(param);
  setTimeout(() => {
    list.value = [];
    listpagenumber.value = 1
    getlistForPrincipal();
    }, 1000);
  
})
const list = ref([]);

// 获取数据

const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
const getlistForPrincipal = async () => {
  let params = {
    end_date: `${time.end_date}`,
    start_date: `${time.start_date}`,
    department_id:PopupId.value, 
    // ,

    page: listpagenumber.value,

  };

  const res = await sheep.$api.recruitment.getlistForPrincipal(params);
  list.value = [...list.value, ...res.data.rows];
  listPage.value = res.data.current_page
  listlast_page.value = res.data.last_page
  list.value.forEach(i => {
    
    i.list.forEach(items=>{
    
      if (items.user.birthday == null) {
          items.user.age = '无'
        } else {
          items.user.age = calculateAge(items.user.birthday)+'岁';
        }
    })      
  })
}
// 加载更多
const loadmoreRef = ref()
onReachBottom((e) => {
  loadmoreRef.value.PopupScrolltolower()
  if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1;
  } else {
    return;
  }
  getlistForPrincipal();
})
onPullDownRefresh(() => {
  listpagenumber.value = 1
  list.value = []
  getlistForPrincipal()
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 500);
})
// 切换项目

const PopupText = ref();
const PopupId = ref();
//项目选择 // 切换项目------------------------
const SelectItem = () => {
  popupListRef.value.open()
};

const popupListRef = ref()
// 调用接口：获取项目列表
const projectDataList = ref([])
const projectList = async (param = null) => {
  const res = await sheep.$api.app.getDepartment(param);
  PopupId.value = res.data[0].childrens[0].id
  PopupText.value = res.data[0].childrens[0].name

  projectDataList.value = res.data;
};
// 项目id
// 子组件触发的方法将项目title改变
const switchTitle = (data) => {
  PopupText.value = data.name
  listpagenumber.value = 1
  PopupId.value = data.id
  list.value = []
  getlistForPrincipal();
}
// 移除人员
const detele_show = ref(false)
const detele_id = ref()
const detele =(e)=>{
  detele_show.value = true
  detele_id.value=e.id

}
const detele_onClick = async()=>{
 let data={
  ids:detele_id.value
 }
  const res = await sheep.$api.recruitment.getDelApply(data);
  if(res.code == 1){
    sheep.$helper.toast(res.msg)
    list.value =[]
    listpagenumber.value =1
    getlistForPrincipal()
    detele_show.value = false
  }else{
   
    detele_show.value = false
  }
  
}
const deteleonCancel=()=>{
  detele_show.value = false
}
// 导出数据
const exportlist= async()=>{
  let data={
    department_id:PopupId.value,
    end_date: `${time.end_date}`,
    start_date: `${time.start_date}`,
    page: listpagenumber.value,
 }
  const res = await sheep.$api.recruitment.getExportUserlist(data);
  if(res.code == 1){
    if (res.code == 1) {
    uni.showLoading({ title: '读取中' });   
    uni.downloadFile({
        url: res.data.url,
        success: function (data) {
            if (data.statusCode === 200) {
                uni.getFileSystemManager().saveFile({
                tempFilePath: data.tempFilePath, //临时路径
                filePath: uni.env.USER_DATA_PATH + "/" +   PopupText.value, 
                success: function (res) {
                        setTimeout(() => {
                        var filePath = res.savedFilePath;
                            uni.hideLoading();
                            uni.openDocument({   
                            filePath: filePath,
                            fileType: 'xlsx',
                            showMenu: true, // 显示右上角菜单（在小程序中可实现转发等操作）
                            success: function (ress) {
                                sheep.$helper.toast('导出成功')
                            },
                            fail(err) {
                               
                                sheep.$helper.toast(err.errMsg)
                            }
                            });
                        
                    
                        }, 1000)
                    }
                    });
            
                }else{
                    sheep.$helper.toast('服务器资源已删除')
                }
        
        },
        fail: (err) => {
        uni.hideLoading()
        sheep.$helper.toast('导出失败')
        }
    });
  }
  }
}
// 拨打电话
const dialPhone = (item) => {

  tools.callPhone(item.user.mobile)
}

</script>

<style scoped lang="scss">
page {
  width: 100%;
  height: 100%;
}

// 执照员工代理商
.list_item_title {
  padding-left: 16rpx;
  height: 80rpx;
  // margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;

  .left {
    display: flex;

    .image_box {
      width: 108rpx;
      height: 44rpx;
      margin-left: 20rpx;
      border-radius: 12rpx;
      background-color: #F4F7FF;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0038F7;
      font-weight: 500;
      font-size: 24rpx;
    }
  }


  image {
    width: 30rpx;
    height: 30rpx;
  }

  .titlename {
    color: $uni-text-color;
    font-weight: 500;
    font-size: $uni-font-size-26;
    margin-left: 10rpx;
  }
}

#app {
  background-size: 100%;
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

:deep(.uni-date__x-input) {
  width: 70% !important;
  padding: 0 !important;
  color: $uni-color-primary;
}

:deep(.uni-date-x--border) {
  border: none;
  width: 100%;
  padding: 0;
  color: $uni-color-primary;
}

:deep(.uni-date-x) {
  background-color: rgba(0, 0, 0, 0);
  padding: 0;
  color: $uni-color-primary !important;
}

:deep(.uni-date-editor) {
  width: 100%;
  color: $uni-color-primary;
}

.uni-date {
  width: 100%;
  color: $uni-color-primary;
}

.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;

  // 主标题
  .host_title {
    color: $uni-bg-color;
    font-size: 34rpx;
    position: relative;
    margin-top: 10rpx;

    .button {
      width: 64rpx;
      height: 64rpx;
      background-color: $uni-bg-color;
      position: absolute;
      border-radius: 50%;

      image {
        width: 40rpx;
        height: 30rpx;
        padding-left: 13rpx;
        padding-top: 18rpx;
      }
    }

    .title {
      text-align: center;
      line-height: 64rpx;
    }
  }

  // 项目
  .project {
    margin-top: 40rpx;
    background-size: 100%;
    width: 100%;
    height: 182rpx;
    background-repeat: no-repeat;
    color: $uni-text-color;
    margin-bottom: 20rpx;

    .chop {
      width: calc(100% - 40rpx);
      height: 56rpx;
      font-size: 40rpx;
      font-weight: 700;
      padding: 40rpx 0 0 40rpx;
      display: flex;
      align-items: center;
      /* 垂直居中 */

      // 项目标题超出隐藏
      .spill {
        // width: 85%;
        padding-right: 18rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      image {
        width: 26rpx;
        height: 26rpx;
        // margin-left: 10rpx;
        //   padding-top: 20rpx;
      }
    }

    .text {
      display: flex;
      width: 90%;
      align-items: center;
      justify-content: space-between;

      .date {
        display: flex;
        height: 100%;
        max-width: 410rpx;
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
        font-size: $uni-font-size-26;
        padding: 12rpx 10rpx 0 40rpx;
        position: relative;

        image {
          position: absolute;
          right: -10rpx;
          bottom: 30%;
          width: 10rpx;
          height: 10rpx;
        }
      }

      .click {
       
        font-weight: 500;
        font-size: 22rpx;
        padding: 3rpx 10rpx;
        margin-left: 12rpx;
        border-radius: 18rpx;
        background: linear-gradient(90deg, rgb(0, 56, 247) 0%, rgb(77, 139, 255) 100%);
        color: #FFFFFF;

      }

    }
  }


}





// 弹出框 列表
.popup_box {
  width: 100%;
  height: 50%;
  background-color: $uni-bg-color;
  border-top-right-radius: 30rpx;
  border-top-left-radius: 30rpx;
  text-align: center;
  font-weight: 700;
  color: #000;
  font-size: 30rpx;

  .title {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
  }

  .name {
    width: 100%;
    height: 50vh;

    .list {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: $uni-bg-color;
    }

    .list_loading {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      font-weight: 400;
      color: #666;
      background-color: $uni-bg-color;
    }
  }
}

// 弹出框 状态
.popup-content {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: $uni-bg-color;
  border-top-right-radius: 30rpx;
  border-top-left-radius: 30rpx;

  .title {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #000;
    font-weight: 700;
  }

  .state {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-weight: 700;
    color: #333;
    text-align: center;
  }
}



:deep(.fui-bottom__popup-wrap) {
  z-index: 9999 !important;
}

:deep(.fui-sticky__wrap) {
  z-index: 11 !important;

}

// 滚动
.comprehensive {
  width: calc(100% - 40rpx);
  background-color: rgba(0, 0, 0, 0);
  margin: 0 20rpx;
  height: 81vh;
}





.phone_image {
  width: 48rpx;
  height: 48rpx;

  image {
    width: 100%;
    height: 100%;
  }
}


:deep(.u-form-item__body.data-v-b4fd400b) {
  padding: 20rpx 0 20rpx 30rpx;
}

:deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
  font-weight: $uni-font-weight;
}

:deep(.u-form-item__body__right__message.data-v-b4fd400b) {
  margin-left: 200rpx !important;
}



// 列表
.add_area {
  border-radius: 16rpx;

  background-color: #FFFFFF;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);

}

.scroll_box {

  padding-bottom: 150rpx !important;

}

// 列表项
.list_item {
  height: 174rpx;
  display: flex;
  align-items: center;
  margin: 0 30rpx 40rpx 30rpx;
  position: relative;



  // 头像盒子
  .head_box {
    width: 114rpx;
    height: 114rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  // 信息盒子
  .message_box {
    margin-left: 20rpx;

    .message_title {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 30rpx;
      font-style: normal;
      text-decoration: none;
      margin-bottom: 4rpx;
      .sex{
        font-family: PingFangSC;
        color: #666;
        font-weight: 400;
        font-size: $uni-font-size-sm;
        font-style: normal;
        text-decoration: none;
        margin-bottom: 10rpx;
 
      }
      .blue {
        color: $uni-color-primary;
        font-weight: 500;
        font-size: 22rpx;
        padding: 3rpx 10rpx;
        margin-left: 12rpx;
        border-radius: 18rpx;
        background-color: #F9FAFF;
      }
    }

    .message_identity {
      font-family: PingFangSC;
      color: #666;
      font-weight: 400;
      font-size: $uni-font-size-sm;
      font-style: normal;
      text-decoration: none;
      margin-bottom: 10rpx;
      display: flex;

      .phone_image {
        margin-left: 10rpx;
        width: 32rpx;
        height: 32rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .mes_flex {
      display: flex;
      height: 40rpx;
      align-items: center;
      color: #666;
      font-weight: 400;
      font-size: $uni-font-size-sm;
      margin-bottom: 10rpx;
    }

    .message_time {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: 500;
      font-size: $uni-font-size-sm;
      font-style: normal;
      text-decoration: none;
      display: flex;

      view {
        margin-right: 15rpx;
      }
    }


  }

  .add_right {
    position: absolute;
    top: 32rpx;
    right: 0;
    z-index: 1;

    .detele {
      line-height: 60rpx;
      font-size: 28rpx;
      height: 60rpx;
      padding: 0 20rpx;
      font-style: normal;
      text-decoration: none;
      text-align: center;
      letter-spacing: 1rpx;
      border-radius: 18rpx;
      background: linear-gradient(90deg, rgb(0, 56, 247) 0%, rgb(77, 139, 255) 100%);
      color: #FFFFFF;
    }
  }



}

.list_item:first-child {
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  margin-top: 30rpx;

}

.list_item:last-child {
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  margin-bottom: 0;
}



.button_box {
  padding-top: 30rpx !important;

}

:deep(.u-radio-group--column) {
  flex-direction: row !important;
  justify-content: space-between;
  width: 76%;
}


.content {
  margin-top: 178rpx;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;

  .button {
    flex: 1;
  }

  .add_area {
    flex: 1;
  }
}

.scroll_box {
  :deep(.fui-sticky__fixed) {
    z-index: 2 !important;
  }
}

.add_area {
  :deep(.fui-sticky__fixed) {
    z-index: 2 !important;
  }
}

:deep(.button_box) {
  z-index: 99 !important;
}

:deep(#fui_gcmo) {
  z-index: 998 !important;
}

:deep(.fui-sticky__wrap) {
  z-index: 1 !important;
}
:deep(.fui-modal__fadein){
  z-index: 9996 !important;
}
</style>